<template>
  <a-popconfirm title="字段展示" @confirm="openColumn" placement="left">
    <template #icon></template>
    <template #description>
      <a-checkbox-group @change="changeCheckBox" v-model:value="checkedList" :options="plainOptions" style="width:300px;height:100px;overflow:auto;"/>
    </template>
    <SettingFilled style="float:right;margin-top: 5px;cursor: pointer;"/>
  </a-popconfirm>
</template>
<script setup>
import {computed,defineProps} from 'vue'
import {setLVal} from "@utils/storage.js";
import {message} from "ant-design-vue";
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  name:{
    type: String,
    default: ''
  },
})
const filterColumns = defineModel('filterColumns')
const checkedList = defineModel('checkedList')
const plainOptions = computed(()=>{
  return props.columns.map(item => item.title)
})
const openColumn = () => {
  setLVal(props.name, checkedList.value)
  message.success('字段保存成功')
}
const changeCheckBox = () => {
  filterColumns.value = props.columns.filter(item => checkedList.value.includes(item.title))
}

</script>

<style scoped>

</style>
